<template>
  <!-- 关键功能：当存在人工结果（标注中或已完成退出）时并排展示两列，否则单列 -->
  <div :class="showManualData ? 'grid grid-cols-2 gap-4' : 'grid grid-cols-1 gap-4'">
    <!-- AI检测结果模块 -->
    <div class="space-y-4">
      <div class="p-4 bg-blue-50 rounded-md">
        <div class="text-3xl font-bold text-blue-600">{{ aiPercent }}%</div>
        <div class="text-gray-600 mt-1">堵塞比例</div>
      </div>
      <div class="p-4 rounded-md" :class="aiDiagnosisColor">
        <div class="text-2xl font-bold">{{ diagnosis }}</div>
        <div class="text-gray-600 mt-1">诊断结果</div>
      </div>
    </div>
    <!-- 关键功能：人工标注结果模块（在人工标注中或已完成后退出仍显示） -->
    <div v-if="showManualData" class="space-y-4">
      <div class="p-4 bg-blue-50 rounded-md">
        <div class="text-3xl font-bold text-blue-600">{{ manualPercentText }}%</div>
        <div class="text-gray-600 mt-1">堵塞比例（人工）</div>
      </div>
      <div class="p-4 rounded-md" :class="manualDiagnosisColor">
        <div class="text-2xl font-bold">{{ manualDiagnosisDisplay }}</div>
        <div class="text-gray-600 mt-1">诊断结果（人工）</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

// 关键功能：展示所需数据
const props = defineProps({
  detectionRatio: { type: Number, default: 0 },
  diagnosis: { type: String, default: '' },
  // 关键功能：控制是否显示人工标注结果（在人工标注中或已完成后退出）
  showManualData: { type: Boolean, default: false },
  manualPercent: { type: [String, Number], default: '0.0' },
  manualDiagnosisDisplay: { type: String, default: '待检测' }
})

// 百分比格式化
const aiPercent = computed(() => {
  return (Number(props.detectionRatio) * 100).toFixed(1)
})
const manualPercentText = computed(() => {
  const n = Number(props.manualPercent)
  return Number.isFinite(n) ? n.toFixed(1) : '0.0'
})

// 颜色计算
const aiDiagnosisColor = computed(() => {
  if (props.diagnosis === '正常') return 'bg-green-50'
  if (props.diagnosis === '轻微堵塞') return 'bg-yellow-50'
  if (props.diagnosis === '堵塞严重') return 'bg-red-50'
  return 'bg-gray-50'
})
const manualDiagnosisColor = computed(() => {
  const text = props.manualDiagnosisDisplay
  if (text === '正常') return 'bg-green-50'
  if (text === '轻微堵塞') return 'bg-yellow-50'
  if (text === '堵塞严重') return 'bg-red-50'
  return 'bg-gray-50'
})
</script>

<style scoped>
</style>
